<template>
  <div>
    <!--  2. {{}}显示数据 -->
    <h1>{{ msg }}</h1>
    <!-- 3. @click绑定点击事件 -->
    <button @click="fn">点我</button>
  </div>
</template>

<script>
/*
  学习目标：翻转世界
*/
export default {
  data() {
    return {
      //     1. data函数中声明数据
      msg: "hello world",
    };
  },
  methods: {
    fn() {
      console.log("触发了  ----->  ", this.msg);
      // 4. 修改数据
      const list = this.msg.split("");
      list.reverse();
      const xxx = list.join("");
      this.msg = xxx;
    },
  },
};
</script>

<style>
</style>